<template>
  <div class="container" id="containerBak">
    <canvas  id="canvasBak" @mousewheel.prevent="roller"></canvas>
    <el-button type="primary" class="big" icon="el-icon-zoom-in" @click="toBigger">图片放大</el-button>
    <el-button type="primary" class="normal" icon="el-icon-zoom-out" @click="toNormal">图片缩小</el-button>
  </div>
</template>

<script>
  /** mixins */
  import { mixin_fishBone } from './mixin/mixin_fishBoneBak'
  /** 工具类 */
  import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
  import $ from 'jquery'
  /** VUE配置 */
  export default {
    name: 'fishbone',
    mixins: [mixin_fishBone],
    components: { },
    data() {
      return {
        options: {},
        urlPrefix: '/mpm/comments/',
        url: {
          // 额外的url
        },
        record: 3,
        initZoomOut: false
      }
    },
    props: {
      canEdit: {
        type: Boolean,
        default: true
      },
      model: {
        default: function() {
          return {}
        },
        type: Object
      }
    },
    methods: {
      roller(e) {
        let direction = e.deltaY > 0 ? 'down' : 'up'
        if (direction === 'up') {
          if (this.record === 10) {
            return
          }
          // 滑轮向上滚动
          this.stage.zoomOut()
          this.record += 1
        } else {
          if (this.record === 0) {
            return
          }
          // 滑轮向下滚动
          this.stage.zoomIn()
          this.record -= 1
        }
      },
      showFullScreen() {
        this.$refs.fullScreenRef.visible = true
      },
      toBigger() {
        this.scene.mode = 'normal'
        this.stage.zoomOut()
        this.record += 1
      },
      toNormal() {
        if (this.record === 0) {
          return
        } else if (this.record === 10) {
          return
        } else if (this.record === 3) {
          // this.scene.centerAndZoom()
          this.stage.zoomIn()
          this.stage.centerAndZoom()
          this.record -= 1
          this.scene.mode = this.record === 0 ? 'select' : 'normal'
          return
        }
        this.stage.zoomIn()
        this.record -= 1
      },
      // 配置函数
      FishBone(options) {
        this.options = $.extend(this.defaults, this.options)
        this.validate()
        this.initHtmlCanvas()
        this.initJtoPoScene()
        this.initFinModelMap()
        this.initNextLevelCount()
        this.initMainBone()
        this.initLevel2Position()
        this.initLevel3Position()
        this.render()
        this.stage.centerAndZoom()
        if (this.initZoomOut) {
          this.stage.zoomOut()
        }
      },
      initFishBone(data) {
        if (data[0].children.length <= 4) {
          this.initZoomOut = true
        }
        this.options.jsonData = data
        this.options.dragable = true
        this.FishBone(this.options)
      },
      resize_canvas() {
        let canvas = document.getElementById("canvasBak")
        let width = document.getElementById("containerBak").offsetWidth
        canvas.width = width
        canvas.height = document.body.clientHeight - 110
      }
    },
    mounted() {
      this.resize_canvas()
    },
    created() {
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    position: relative;
    text-align: center;
  }
  .big {
    position: absolute;
    right: 0px;
    top: 10px;
  }
  .normal {
    position: absolute;
    right: 0px;
    top: 45px;
  }
  .tooltip {
    position: absolute;
    right: 85px;
    top: 10px;
  }
  .full-screen {
    position: absolute;
    right: 0px;
    top: 80px;
  }
</style>
